<template>
    <div class="app-container">
      <div>
        <el-input v-model="pageDto.where.email" placeholder="请输入邮箱号" style="width: 250px;margin-left: 20px;"></el-input>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="search1()">搜索</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="pageDto.where.email=''">清空</el-button>
        <el-button type="Warning" icon="el-icon-circle-plus-outline">添加</el-button>
      </div>
      <div style="margin-top: 20px;">
        <el-table :data="userList" style="width: 100%"
                  :header-cell-style="{ background: '#F7F7F8', color: '#18191B', 'text-align': 'center' }">
                  <el-table-column prop="id" label="用户Id" align="center" width="65px"> </el-table-column>
                  <el-table-column prop="nickName" label="昵称" align="center"> </el-table-column>
                  <el-table-column prop="realName" label="真实姓名" align="center"> </el-table-column>
                  <el-table-column prop="phone" label="手机号" align="center"> </el-table-column>
                  <el-table-column prop="email" label="邮箱" align="center"> </el-table-column>
                  <el-table-column prop="enable" label="用户状态" align="center" width="80px"> 
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.enable == 2" key="暂用" type="danger" effect="dark">
                            {{ '暂用' }}
                        </el-tag>
                        <el-tag v-if="scope.row.enable == 1" key="可用" type="success" effect="dark">
                            {{ '可用' }}
                        </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="description" label="描述" align="center"> </el-table-column>
                  <el-table-column prop="createTime" label="创建时间"  align="center"></el-table-column>
                  <el-table-column prop="updateTime" label="更新时间"  align="center"></el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">                  
                        <el-link type="primary" @click="updates(scope.row)" style="left: 0px;">修改</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-link type="danger" @click="deletes(scope.row.id)" style="right: 0px;">删除</el-link>                       
                    </template>
                  </el-table-column>
              </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageDto.nowPage"
            :page-sizes="[5, 10]" :page-size="pageDto.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <!-- 修改 -->
      <el-dialog title="修改页面" :visible.sync="dialogTableVisible">
           <el-form ref="form" :model="userupdate" label-width="80px">
            <el-form-item label="昵称:" prop="nickName">
                   <el-input v-model="userupdate.nickName"></el-input>
               </el-form-item>
               <el-form-item label="真实姓名:" prop="realName">
                   <el-input v-model="userupdate.realName"></el-input>
               </el-form-item>
               <el-form-item label="用户名:" prop="userName">
                   <el-input v-model="userupdate.userName"></el-input>
               </el-form-item>
               <el-form-item label="密码:" prop="password">
                   <el-input v-model="userupdate.password"></el-input>
               </el-form-item>
               <el-form-item label="手机号:" prop="phone">
                   <el-input v-model="userupdate.phone"></el-input>
               </el-form-item>
               <el-form-item label="邮箱:" prop="email">
                   <el-input v-model="userupdate.email"></el-input>
               </el-form-item>
               <el-form-item>
                    <el-button type="primary" @click="onSubmit()">确认修改</el-button>
                    <el-button @click="dialogTableVisible=false">取消</el-button>
               </el-form-item>
           </el-form>
        </el-dialog>
        <el-dialog title="添加页面" :visible.sync="dialogTableVisible1">
           <el-form ref="form" :model="userupdate" label-width="80px">
            <el-form-item label="昵称:" prop="nickName">
                   <el-input v-model="userupdate.nickName"></el-input>
               </el-form-item>
               <el-form-item label="真实姓名:" prop="realName">
                   <el-input v-model="userupdate.realName"></el-input>
               </el-form-item>
               <el-form-item label="用户名:" prop="userName">
                   <el-input v-model="userupdate.userName"></el-input>
               </el-form-item>
               <el-form-item label="密码:" prop="password">
                   <el-input v-model="userupdate.password"></el-input>
               </el-form-item>
               <el-form-item label="手机号:" prop="phone">
                   <el-input v-model="userupdate.phone"></el-input>
               </el-form-item>
               <el-form-item label="邮箱:" prop="email">
                   <el-input v-model="userupdate.email"></el-input>
               </el-form-item>
               <el-form-item>
                    <el-button type="primary" @click="submitadd()">确认添加</el-button>
                    <el-button @click="dialogTableVisible1=false">取消</el-button>
               </el-form-item>
           </el-form>
        </el-dialog>
      <!-- <el-dialog title="修改页面" :visible.sync="dialogTableVisible">
              <el-form :model="userupdate"  ref="ruleForm" label-width="100px"  class="demo-ruleForm">
               <el-form-item label="设备名称:" prop="nickName">
                   <el-input v-model="userupdate.nickName"></el-input>
               </el-form-item>
               <el-form-item label="设备key:" prop="realName">
                   <el-input v-model="userupdate.realName"></el-input>
               </el-form-item>
               <el-form-item label="继电器编号:" prop="userName">
                   <el-input v-model="userupdate.userName"></el-input>
               </el-form-item>
               <el-form-item label="设备名称:" prop="password">
                   <el-input v-model="userupdate.password"></el-input>
               </el-form-item>
               <el-form-item label="设备key:" prop="phone">
                   <el-input v-model="userupdate.phone"></el-input>
               </el-form-item>
               <el-form-item label="继电器编号:" prop="email">
                   <el-input v-model="userupdate.email"></el-input>
               </el-form-item> -->
    </div>
  </template>
  
  <script>

  import{findAll,deleted,updates} from '@/api/user';
  export default {
    data() {
      return {
        pageDto: {
        now: 1,
        size: 5,
        where: {
        }
      },
      userList:[],
      input:'',
      pages: 0,
      total: 0,
      dialogTableVisible:false,
      dialogTableVisible1:false,
      userupdate:{
        nickName:undefined,
        realName:undefined,
        userName:undefined,
        password:undefined,
        phone:undefined,
        email:undefined,
      }
      }
    },
    methods: {
      search(){
        findAll(this.pageDto).then(res=>{
            this.userList=res.list,
            this.pages=res.pages,
            this.total=res.total
        })
      },
      handleSizeChange(size) {
      this.pageDto.size = size,
        this.search()
    },
    handleCurrentChange(now) {
      this.pageDto.now = now,
        this.search()
    },
    updates(id){
        this.dialogTableVisible=true,
        this.userupdate=id
    },
    deletes(id){
        this.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleted(id).then(res => {
          if (res.code == 1) {
            this.$message({
              type: 'info',
              message: '删除失败'
            });
          };
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          };
          this.search()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    onSubmit(){
      updates(this.userupdate).then(res=>{
        this.pageDto.now = 1;
        if(res.code==0){
          this.$message({
              type: 'success',
              message: '修改成功'
            });
        };
        if(res.code!=0){
          this.$message({
          type: 'info',
          message: '修改失败'
        });
        }
        this.search();
        this.userupdate={}
      })
    },
    search1(){
      findAll(this.pageDto).then(res=>{
            this.userList=res.list,
            this.pages=res.pages,
            this.total=res.total
        })
    }
    },
    created(){
        this.search();
        
    }
  }
  </script>
  
  <style>
  
  </style>
  